@layout("/common/_container.html",{js:["/assets/nanData/nanData_chart.js"],css:["/assets/common/module/formSelects/formSelects-v4.css"]}){
<style>
    .layui-fluid{
        background: #fff;
    }
    .toolbar, .toolbar *{
        box-sizing: border-box;
    }
    .toolbar{
        height: calc(100vh - 30px);
        overflow: auto;
    }
    .section{
        overflow: auto;
        padding: 15px;
        margin-top: 10px;
        background: #f1f1f1;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        column-gap: 15px;
        row-gap: 15px;
        border-radius: 10px 10px 0 0;
    }
    .chart_section{
        padding: 0 15px 15px;
        display: block;
        margin-top: 0;
        border-radius: 0 0 10px 10px;
        margin-bottom: 15px;
    }
    .stop_chart{
        grid-template-columns: repeat(4, 1fr);
    }
    .section .item{
        border-radius: 10px;
        background: #fff;
        padding: 15px 10px;
    }
    .section .item .title{
        font-size: 14px;
        font-weight: bold;
        color: #999;
    }
    .section .item .content{
        font-size: 20px;
        padding-top: 15px;
        color: #000;
    }
    .section .item .tip{
        font-size: 12px;
        padding-top: 10px;
        color: #666;
    }
    .section .item .intro{
        font-size: 12px;
        padding-top: 10px;
        display: flex;
        align-content: center;
        justify-content: space-between;
    }
    .section .item .intro .leaf{
        font-size: 14px;
        color: #000;
    }
    .section .item .intro p{
        font-size: 12px;
        color: #000;
    }
    .section .item .intro p span{
        font-size: 12px;
        color: #999;
    }
    .chart{
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        margin-top: 15px;
    }
    .chart:first-child{
        margin-top: 0;
    }
    .chart .title{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .chart .title>span{
        font-size: 14px;
        color: #999;
        font-weight: bold;
    }
    .chart .title .bar{
        display: flex;
        align-items: center;
    }
    .chart .title .bar span{
        cursor: pointer;
        font-size: 12px;
        color: #000;
        padding: 5px 10px;
        border-radius: 4px;
    }
    .chart .title .bar span.sel{
        background: #ccc;
        color: #000;
        font-weight: bold;
    }
    .chart .content{
        height: 300px;
        margin-top: 10px;
    }
    .nav{
        text-align: center;
        padding-top: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #000;
    }
</style>
<div class="layui-body-header">
    <span class="layui-body-header-title">数据统计管理</span>
</div>

<div class="layui-fluid">
    <div class=" toolbar">
        <div class="nav">注册用户数据</div>
        <div class="section">
            <div class="item">
                <p class="title">总数</p>
                <p class="content"><span id="userTotal"></span>人</p>
            </div>
            <div class="item">
                <p class="title">今日新增</p>
                <p class="content"><span id="userDataToday"></span>人</p>
            </div>
            <div class="item">
                <p class="title">昨日新增</p>
                <p class="content"><span id="userDataYesterday"></span>人</p>
            </div>
            <div class="item">
                <p class="title">本月新增</p>
                <p class="content"><span id="userDataCurrentMonth"></span>人</p>
            </div>
            <div class="item">
                <p class="title">上月新增</p>
                <p class="content"><span id="userDataBeforeMonth"></span>人</p>
            </div>
        </div>
        <div class="section chart_section">
            <div class="chart">
                <div class="title">
                    <span>注册用户（人）</span>
                    <p class="bar">
                        <span id="dayUser" class="sel">按日</span>
                        <span id="monthUser" >按月</span>
                    </p>
                </div>
                <div class="content" id="userChart"></div>
            </div>
            <div class="chart">
                <div class="content" id="countryChart"></div>
            </div>
            <div class="chart">
                <div class="content" id="sexChart"></div>
            </div>
        </div>
        <div class="nav">绑定设备数据</div>
        <div class="section">
            <div class="item">
                <p class="title">总数</p>
                <p class="content"><span id="deviceTotal"></span>个</p>
            </div>
            <div class="item">
                <p class="title">今日绑定</p>
                <p class="content"><span id="deviceDataToday"></span>人</p>
            </div>
            <div class="item">
                <p class="title">昨日绑定</p>
                <p class="content"><span id="deviceDataYesterday"></span>人</p>
            </div>
            <div class="item">
                <p class="title">本月绑定</p>
                <p class="content"><span id="deviceDataCurrentMonth"></span>个</p>
            </div>
            <div class="item">
                <p class="title">上月绑定</p>
                <p class="content"><span id="deviceDataBeforeMonth"></span>个</p>
            </div>
        </div>
        <div class="section chart_section">
            <div class="chart">
                <div class="title">
                    <span>绑定设备（个）</span>
                    <p class="bar">
                        <span id="dayDevice" class="sel">按日</span>
                        <span id="monthDevice" >按月</span>
                    </p>
                </div>
                <div class="content" id="deviceChart"></div>
            </div>
        </div>
        <div class="nav">广告数据</div>
        <div class="section stop_chart">
            <div class="item">
                <p class="title">今日展示</p>
                <p class="content"><span id="bannerTodayShow"></span>次</p>
                <p class="tip"><span id="bannerTodayShowOne"></span> + <span id="bannerTodayShowTwo"></span> + <span id="bannerTodayShowThree"></span></p>
            </div>
            <div class="item">
                <p class="title">今日点击</p>
                <p class="content"><span id="bannerTodayClick"></span>次</p>
                <p class="tip"><span id="bannerTodayClickOne"></span> + <span id="bannerTodayClickTwo"></span> + <span id="bannerTodayClickThree"></span></p>
            </div>
            <div class="item">
                <p class="title">昨日展示</p>
                <p class="content"><span id="bannerYesterdayShow"></span>次</p>
                <p class="tip"><span id="bannerYesterdayShowOne"></span> + <span id="bannerYesterdayShowTwo"></span> + <span id="bannerYesterdayShowThree"></span></p>
            </div>
            <div class="item">
                <p class="title">昨日点击</p>
                <p class="content"><span id="bannerYesterdayClick"></span>次</p>
                <p class="tip"><span id="bannerYesterdayClickOne"></span> + <span id="bannerYesterdayClickTwo"></span> + <span id="bannerYesterdayClickThree"></span></p>
            </div>
            <div class="item">
                <p class="title">本月展示</p>
                <p class="content"><span id="bannerCurrentMonthShow"></span>次</p>
                <p class="tip"><span id="bannerCurrentMonthShowOne"></span> + <span id="bannerCurrentMonthShowTwo"></span> + <span id="bannerCurrentMonthShowThree"></span></p>
            </div>
            <div class="item">
                <p class="title">本月点击</p>
                <p class="content"><span id="bannerCurrentMonthClick"></span>次</p>
                <p class="tip"><span id="bannerCurrentMonthClickOne"></span> + <span id="bannerCurrentMonthClickTwo"></span> + <span id="bannerCurrentMonthClickThree"></span></p>
            </div>
            <div class="item">
                <p class="title">上月展示</p>
                <p class="content"><span id="bannerBeforeMonthShow"></span>次</p>
                <p class="tip"><span id="bannerBeforeMonthShowOne"></span> + <span id="bannerBeforeMonthShowTwo"></span> + <span id="bannerBeforeMonthShowThree"></span></p>
            </div>
            <div class="item">
                <p class="title">上月点击</p>
                <p class="content"><span id="bannerBeforeMonthClick"></span>次</p>
                <p class="tip"><span id="bannerBeforeMonthClickOne"></span> + <span id="bannerBeforeMonthClickTwo"></span> + <span id="bannerBeforeMonthClickThree"></span></p>
            </div>
        </div>
        <div class="section chart_section">
            <div class="chart">
                <div class="title">
                    <span>广告数据（次）</span>
                    <p class="bar">
                        <span id="dayBanner" class="sel">按日</span>
                        <span id="monthBanner" >按月</span>
                    </p>
                </div>
                <div class="content" id="bannerChart"></div>
            </div>
        </div>
        <div class="nav">访问数据</div>
        <div class="section stop_chart">
            <div class="item">
                <p class="title">今日平均停留</p>
                <div class="intro">
                    <p class="leaf">社区</p>
                    <p class="leaf"><span id="stopCommunityTimeToday"></span><span> | </span><span id="stopCommunityNumToday"></span></p>
                </div>
                <!-- <div class="intro">
                    <p class="leaf">游戏</p>
                    <p class="leaf"><span id="stopGameTimeToday"></span><span> | </span><span id="stopGameNumToday"></span></p>
                </div> -->
                <div class="intro">
                    <p class="leaf">互动</p>
                    <p class="leaf"><span id="stopInteractTimeToday"></span><span> | </span><span id="stopInteractNumToday"></span></p>
                </div>
                <div class="intro">
                    <p class="leaf">聊天</p>
                    <p class="leaf"><span id="stopChatTimeToday"></span><span> | </span><span id="stopChatNumToday"></span></p>
                </div>
            </div>
            <div class="item">
                <p class="title">昨日平均停留</p>
                <div class="intro">
                    <p class="leaf">社区</p>
                    <p class="leaf"><span id="stopCommunityTimeYesterday"></span><span> | </span><span id="stopCommunityNumYesterday"></span></p>
                </div>
                <!-- <div class="intro">
                    <p class="leaf">游戏</p>
                    <p class="leaf"><span id="stopGameTimeYesterday"></span><span> | </span><span id="stopGameNumYesterday"></span></p>
                </div> -->
                <div class="intro">
                    <p class="leaf">互动</p>
                    <p class="leaf"><span id="stopInteractTimeYesterday"></span><span> | </span><span id="stopInteractNumYesterday"></span></p>
                </div>
                <div class="intro">
                    <p class="leaf">聊天</p>
                    <p class="leaf"><span id="stopChatTimeYesterday"></span><span> | </span><span id="stopChatNumYesterday"></span></p>
                </div>
            </div>
            <div class="item">
                <p class="title">本月平均停留</p>
                <div class="intro">
                    <p class="leaf">社区</p>
                    <p class="leaf"><span id="stopCommunityTimeCurrentMonth"></span><span> | </span><span id="stopCommunityNumCurrentMonth"></span></p>
                </div>
                <!-- <div class="intro">
                    <p class="leaf">游戏</p>
                    <p class="leaf"><span id="stopGameTimeCurrentMonth"></span><span> | </span><span id="stopGameNumCurrentMonth"></span></p>
                </div> -->
                <div class="intro">
                    <p class="leaf">互动</p>
                    <p class="leaf"><span id="stopInteractTimeCurrentMonth"></span><span> | </span><span id="stopInteractNumCurrentMonth"></span></p>
                </div>
                <div class="intro">
                    <p class="leaf">聊天</p>
                    <p class="leaf"><span id="stopChatTimeCurrentMonth"></span><span> | </span><span id="stopChatNumCurrentMonth"></span></p>
                </div>
            </div>
            <div class="item">
                <p class="title">上月平均停留</p>
                <div class="intro">
                    <p class="leaf">社区</p>
                    <p class="leaf"><span id="stopCommunityTimeBeforeMonth"></span><span> | </span><span id="stopCommunityNumBeforeMonth"></span></p>
                </div>
                <!-- <div class="intro">
                    <p class="leaf">游戏</p>
                    <p class="leaf"><span id="stopGameTimeBeforeMonth"></span><span> | </span><span id="stopGameNumBeforeMonth"></span></p>
                </div> -->
                <div class="intro">
                    <p class="leaf">互动</p>
                    <p class="leaf"><span id="stopInteractTimeBeforeMonth"></span><span> | </span><span id="stopInteractNumBeforeMonth"></span></p>
                </div>
                <div class="intro">
                    <p class="leaf">聊天</p>
                    <p class="leaf"><span id="stopChatTimeBeforeMonth"></span><span> | </span><span id="stopChatNumBeforeMonth"></span></p>
                </div>
            </div>
        </div>
        <div class="section chart_section">
            <div class="chart">
                <div class="title">
                    <span>平均停留时长（秒）</span>
                    <p class="bar">
                        <span id="dayTime" class="sel">按日</span>
                        <span id="monthTime">按月</span>
                    </p>
                </div>
                <div class="content" id="stopTimeChart"></div>
            </div>
            <div class="chart">
                <div class="title">
                    <span>停留人数（人）</span>
                    <p class="bar">
                        <span id="dayNum" class="sel">按日</span>
                        <span id="monthNum" >按月</span>
                    </p>
                </div>
                <div class="content" id="stopNumChart"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/html" id="tableBar">
</script>
@}
